<!--违章告警统计-->
<template>
  <div class="com-container">
    <div class="com-chart" ref="weizhang"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chartInstance: null,
      allData: null, //服务器返回的数据
    };
  },
  props: {
    fenqu: String,
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.weizhang, "chalk");
      const initOption = {
        tooltip: {
          trigger: "axis",
        },
        title: {
          text: "▎ 违章统计",
          left: 20,
          top: 10,
        },
        backgroundColor: "", //设置无背景色
        grid: {
          top: "25%",
          left: "5%",
          right: "7%",
          bottom: "5%",
          containLabel: true, //距离包含坐标轴文字
        },
        xAxis: {
          type: "category",
          boundaryGap: false, // 去除轴内间距
          axisLabel: {
            color: "#fff",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            type: "line",
            lineStyle: {
              color: "#00d887",
              width: 2,
            },
            areaStyle: {
              // 渐变色，只需要复制即可
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0, 216, 135, 0.4)", // 渐变色的起始颜色
                  },
                  {
                    offset: 0.8,
                    color: "rgba(0, 216, 135, 0.1)", // 渐变线的结束颜色
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
            // 设置拐点
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "#0184d5",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12,
            },
          },
        ],
      };
      this.chartInstance.setOption(initOption);
    },
    async getData() {
      const res = await this.$http.get("/people/illegal_number", {
        params: {
          area: this.fenqu,
        },
      });
      this.allData = res.data;
      // console.log(this.fenqu);
      this.updateChart();
    },
    updateChart() {
      const dataOption = {
        xAxis: {
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        },
        series: [
          {
            data: this.allData,
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      const titleFontSize = (this.$refs.weizhang.offsetWidth / 100) * 3.6;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize * 1.5,
          },
        },
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
  },
};
</script>

<style>
</style>